<script setup>
import { reactive, onMounted } from 'vue'
import Chart from 'chart.js/auto'
import { getTotalApi, getTopListApi, getTotaBuildApi } from '@/api/home'
import { useUserStore } from '@/store'

const { userType } = useUserStore()

// 要展示的数据
const showData = reactive({
    // 公告列表
    noticeList: [],
    stuCount: 0,
    classCount: 0,
    repairCount: 0,
    buildCount: 0
})

// 获取公告信息
const getNoticeList = async () => {
    const res2 = await getTopListApi()
    showData.noticeList = res2.data
}

getNoticeList()

// 管理员看到的页面
if (userType === '1') {
    const init = async () => {
        // 获取统计信息
        const res = await getTotalApi()
        showData.stuCount = res.data.stuCount
        showData.classCount = res.data.classCount
        showData.repairCount = res.data.repairCount
        showData.buildCount = res.data.buildCount
    }

    onMounted(async () => {
        // 绘制图表
        const ctx = document.querySelector('canvas')
        const { data } = await getTotaBuildApi()
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: data.names,
                datasets: [{
                    label: '学生统计',
                    data: data.counts,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        })
    })

    init()
}
</script>

<template>
    <template v-if="userType === '1'">
        <!-- 统计区域 -->
        <el-row :gutter="20" type="flex" justify="center" mb-12>
            <el-col :span="6">
                <div class="show-header" style="background: rgb(45, 183, 245);">
                    <div class="show-num">{{ showData.stuCount }}</div>
                    <div class="bottom-text">学生总数</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="show-header" style="background: rgb(237, 64, 20);">
                    <div class="show-num">{{ showData.classCount }}</div>
                    <div class="bottom-text">班级总数</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="show-header">
                    <div class="show-num">{{ showData.repairCount }}</div>
                    <div class="bottom-text">待维修数</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="show-header" style="background: rgb(255, 153, 0);">
                    <div class="show-num">{{ showData.buildCount }}</div>
                    <div class="bottom-text">楼宇总数</div>
                </div>
            </el-col>
            <!-- 图表区域 -->
            <div w-full class="mt-10 h-[300px] flex justify-center items-center">
                <canvas class="w-9/10 h-full"></canvas>
            </div>
        </el-row>
        <!-- 公告区域 -->
        <el-card mb-40>
            <template #header>
                <span style="color: #000000; font-weight: 600;">公告列表</span>
            </template>
            <div v-for="(item, index) in showData.noticeList" :key="index" class="text item">
                <span style="font-weight: 600; color: #000000;">{{ item.noticeTitle }}</span>
                <span style="margin-left: 30px; font-size: 14px;">
                    {{ item.noticeText }}
                </span>
                <span style="margin-left: 30px; font-size: 14px;">
                    {{ item.createTime }}
                </span>
                <el-divider></el-divider>
            </div>
        </el-card>
    </template>

    <template v-else>
        <!-- 公告区域 -->
        <el-card  style="margin-top: 30px;">
            <template #header>
                <span style="color: #000000; font-weight: 600;">公告列表</span>
            </template>
            <div v-for="(item, index) in showData.noticeList" :key="index" class="text item">
                <span style="font-weight: 600; color: #000000;">{{ item.noticeTitle }}</span>
                <span style="margin-left: 30px; font-size: 14px;">
                    {{ item.noticeText }}
                </span>
                <span style="margin-left: 30px; font-size: 14px;">
                    {{ item.createTime }}
                </span>
                <el-divider></el-divider>
            </div>
        </el-card>
    </template>
</template>

<style scoped>
.bottom-text {
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    height: 25px;
    line-height: 25px;
    text-align: center;
    position: absolute;
    font-weight: 600;
}

.show-header {
    background: #00c0ef;
    color: #fff;
    height: 80px;
    border-radius: 5px;
    position: relative;
}

.show-num {
    font-size: 38px;
    font-weight: 600;
    padding: 5px;
}
</style>